<template>
  <div>
    <!-- <nav-header /> -->
    <!-- 导航部分 -->
    <nav class="blog-nav layui-header">
      <div class="blog-container">
        <a class="blog-logo" href="">梦中程序员</a>
        <ul class="layui-nav" lay-filter="nav">
          <li class="layui-nav-item layui-this">
            <a @click="toHome"
              ><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a
            >
          </li>
          <li class="layui-nav-item">
            <a @click="toAricle"
              ><i class="fa fa-file-text fa-fw"></i>&nbsp;文章分类</a
            >
          </li>
          <li class="layui-nav-item">
            <a @click="toAbout"
              ><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a
            >
          </li>
          <li class="layui-nav-item" style="margin-left: 100px">
            <i class="fa fa-user fa-fw"></i>&nbsp;
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ realName }}<i class="el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="toManagement"
                  >管理页面</el-dropdown-item
                >
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
        <a class="blog-navicon" href="javascript:;">
          <i class="fa fa-navicon"></i>
        </a>
      </div>
    </nav>

    <!-- 手机导航 -->
    <ul
      class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
      lay-filter="nav"
    >
      <li class="layui-nav-item layui-this">
        <a @click="toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
      </li>
      <li class="layui-nav-item">
        <a @click="toAricle"
          ><i class="fa fa-file-text fa-fw"></i>&nbsp;文章分类</a
        >
      </li>
      <li class="layui-nav-item">
        <a @click="toAbout"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
      </li>
    </ul>
    <div class="blog-body">
      <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
          <a href="index.html" title="网站首页">网站首页</a>
          <a href="article.html" title="文章专栏">文章专栏</a>
          <a><cite>hexo使用本地搜索</cite></a>
        </blockquote>
        <div class="blog-main">
          <div class="blog-main-left">
            <!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
            <div class="article-detail shadow">
              <div class="article-detail-title">hexo使用本地搜索</div>
              <div class="article-detail-info">
                <span>编辑时间：2019/4/02 17:30:22</span>
                <span>作者：Leruge</span>
                <span>浏览量：12</span>
              </div>
              <div class="article-detail-content">
                很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。很多个人站长分享技术文章的时候都是在自己搭建的博客上，但是也有一部分人不喜欢维护服务器或者不想花费这个钱去买服务器，所以就选择了在git上写博客，hexo因为简单方便被很多博主所选择，同时就出现了一个问题，要么不想自己去写一个自己想要的主题模板，要么就是选择了一个喜欢的主题模板，但是对于提供的功能总有那么一点不满意，这篇文章呢，我就介绍一个博文本地搜索的插件使用。
              </div>
            </div>
            <!-- 评论区域 -->
            <div
              class="blog-module shadow"
              style="box-shadow: 0 1px 8px #a6a6a6"
            >
              <fieldset
                class="layui-elem-field layui-field-title"
                style="margin-bottom: 0"
              >
                <legend>来说两句吧</legend>
                <div class="layui-field-box">
                  <form class="layui-form blog-editor" action="">
                    <div class="layui-form-item">
                      <textarea
                        name="editorContent"
                        lay-verify="content"
                        id="remarkEditor"
                        placeholder="请输入内容"
                        class="layui-textarea layui-hide"
                      ></textarea>
                    </div>
                    <div class="layui-form-item">
                      <button
                        class="layui-btn"
                        lay-submit="formRemark"
                        lay-filter="formRemark"
                      >
                        提交评论
                      </button>
                    </div>
                  </form>
                </div>
              </fieldset>
              <div class="blog-module-title">最新评论</div>
              <ul class="blog-comment">
                <li>
                  <div class="comment-parent">
                    <img src="@/assets/images/profile.jpg" alt="absolutely" />
                    <div class="info">
                      <span class="username">Absolutely</span>
                      <span class="time">2017-03-18 18:46:06</span>
                    </div>
                    <div class="content">
                      我为大家做了模拟评论功能！还有，这个评论功能也可以改成和留言一样，但是目前没改，有兴趣可以自己改
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="blog-main-right">
            <!--右边悬浮 平板或手机设备显示-->
            <div class="category-toggle">
              <i class="fa fa-chevron-left"></i>
            </div>
            <!--这个div位置不能改，否则需要添加一个div来代替它或者修改样式表-->
            <div class="blog-module shadow">
              <div class="blog-module-title">随便看看</div>
              <ul class="fa-ul blog-module-ul">
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">在git上搭建hexo博客教程</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用CSRF防跨站请求伪造</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用场景验证</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用消息队列扩展教程</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">浅谈ThinkPHP使用数据迁移工具</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用分表功能</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用邮箱扩展发送邮件</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <footer class="blog-footer">
      <p>
        <span>Copyright</span><span>&copy;</span><span>2019</span
        ><a href="">梦中程序员</a>
      </p>
      <p>
        <a href="http://www.miibeian.gov.cn/" target="_blank"
          >京ICP备18053420号-1</a
        >
      </p>
    </footer>

    <div class="blog-share layui-hide">
      <div class="blog-share-body">
        <div style="width: 200px; height: 100%">
          <div class="bdsharebuttonbox">
            <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
            <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
            <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
          </div>
        </div>
      </div>
    </div>

    <div class="blog-mask animated layui-hide"></div>
  </div>
</template>

<script>
import NavHeaderVue from "../components/NavHeader.vue";

export default {
  comments: {
    NavHeaderVue,
  },
  data(){
    return{
        realName: sessionStorage.getItem("realName")
    }
  },
  methods: {
    toAricle() {
      this.$router.push("/article");
    },
    toHome() {
      this.$router.push("/");
    },
    toAbout() {
      this.$router.push("/about");
    },
    toManagement() {
      this.$router.push("/layout");
    },
    logout() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
  },
  mounted() {
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "/lib/layui/layui.js";
    document.body.appendChild(script);

    let script2 = document.createElement("script");
    script2.type = "text/javascript";
    script2.src = "/js/global.js";
    document.body.appendChild(script2);

    let script3 = document.createElement("script");
    script3.type = "text/javascript";
    script3.src = "/js/prettify.js";
    document.body.appendChild(script3);

    let script4 = document.createElement("script");
    script4.type = "text/javascript";
    script4.src = "/js/detail.js";
    document.body.appendChild(script4);
  },
};
</script>

<style lang="less" scoped>
@import "/lib/layui/css/layui.css";
@import "/lib/font-awesome/css/font-awesome.min.css";
@import "../assets/css/global.css";
@import "../assets/css/prettify.css";
@import "../assets/css/detail.css";

a {
  cursor: pointer;
}
</style>